<template>
  <div class="about">
    <el-container>
      <el-main>
        <div class="conent"  v-for='(item,i) in articlelist'>
          <biaoti>序一 蒋勋</biaoti><br>
          {{item.namebook}}
          <footer @click="xyz(item.id)">
            <a href="#" title="下一章">下一章</a>
          </footer>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { setToken, setUserName } from "../../utils/auth";
import request from "../../utils/request";
export default {
  data(){
    return{
        id: '',
        articlelist:''
    }
  },
  created() {
   this.getArticlelist();
  },
  methods:{
       getArticlelist(){
        let id = this.$route.query.id;
        request({
          url: "/api/user/articlelst",
          method: "post",
          data: {id}
        }).then(res => {
        console.log(res)
        this.articlelist = res.list
          
        });
    },
    xyz(id){
        // alert(id)
         id = id + 1;
       
          request({
          url: "/api/user/articlexyz",
          method: "post",
          data: {id}
          }).then(res => {
          console.log(res)
          this.articlelist = res.list
            
          });
    }
  }
}
</script> 
<style lang="less" scoped>
  // html{
  //   height: 100%;
  //  background-color: rgba(238,240,244,.1); 
  //   position: relative;
  // }

  .el-header{
    margin-top: -7px;
    width: 49.5%;
    height: 75px;
    left: 25.2%;
    border-bottom: 1px solid rgba(238,240,244,.1);
    background-color: #1f2022;
    position: fixed;
    z-index: 999;
  }

  .readerTopBar_home {
    width: 48px;
    height: 48px;
    background-image: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/reader_top_home.37ef15b1.png);
    background-repeat: no-repeat;
    display: block;
    margin: 20px 8px;
  }

  .readerTopBar_title {
    position: absolute;
    top:20px;
    left: 72px;
    color: #fff;
    opacity: .8;
    text-decoration: none;
  }

  .readerTopBar_title_link{
    color: #fff;
    opacity: .8;
    text-decoration: none;
  }

  .actionItem{
    position: absolute;
    top:20px;
    right: 82px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: .7;
    text-decoration: none;
  }

  .actionItem>i{
    display: block;
    width: 25px;
    height: 20px;
    position: absolute;
    top:0px;
    right: 72px;
    background-image: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/reader_top_bookshelf.e1f86368.png);
  }

  .readerTopBar_right{
      height:24px;
      width: 50px;
      position: absolute;
      top:20px;
      right: 16px;
  }

  .readerTopBar_right>a{
    color: #fff;
    opacity: .7;
    text-decoration: none;
  }

  .el-main {
    width: 55rem;
   
    // margin: 40px auto;
    height: auto;
    border-bottom: 1px solid rgba(238,240,244,.1);
    background-color: #1f2022;
    position: relative;
  }

  .conent{
    width: 50%;
    font-size: 18px;
    color: #fff;
    line-height: 45px;
    opacity: .7;
    margin: 60px auto;
    text-align: left;
  }

  .conent>biaoti{
    font-size: 28px;
    color: #fff;
    text-align: left;
  }

  .conent>footer{
    width: 100%;
     height:600px;
  }

  .conent>footer>a{
    display: block;
    width: 55%;
    height:50px;
    margin: 40px auto;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background-color: hsla(0,0%,100%,.1);
    color: #fff;
    text-decoration: none;
  }
</style>